<template>
  <div>
    <!-- 文章等待加载中 -->
    <van-loading v-if="articleList.length === 0" size="24px" color="#007bff">文章加载中...</van-loading>
    <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
        <!-- 文章列表 -->
        <ArticleItem v-for="item in articleList" :key="item.art_id" :artObj="item" @dislike="dislikeFn"
                     @report="reportFn" @click.native="itemClickFn(item.art_id)"></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI, articleDislikeAPI, articleReportAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem.vue'
import Notify from '@/ui/Notify.js'

export default {
  props: {
    channelID: Number // 频道ID
  },
  data() {
    return {
      articleList: [], // 文章列表
      loading: false, // 底部加载状态
      refreshing: false, // 下拉刷新状态
      finished: false, // 底部加载是否完成
      timestamp: new Date().getTime() // 分页时间戳
    }
  },
  created() {
    this.getArticleListFn()
    console.log(this.timestamp)
  },
  methods: {
    // 请求文章列表
    async getArticleListFn() {
      // 请求列表数据
      const { data: res } = await getArticleListAPI({
        channel_id: this.channelID,
        timestamp: this.timestamp
      })
      console.log(res)
      // 合并数组
      this.articleList = [...this.articleList, ...res.data.results]
      this.timestamp = res.data.pre_timestamp

      this.loading = false // 如果不关闭，底部一直为加载中状态，下次触底不会触发onLoad事件
      // 数据全部加载完成
      if (res.data.pre_timestamp === null) {
        this.finished = true
      }
      this.refreshing = false // 如果不关闭，上部一直为加载中状态，下次触底不会触发onRefresh事件
    },

    // 底部加载方法
    onLoad() {
      // immediate-check: 内部不要进行判断而已, 监听滚动事件的代码还在
      // 第一个频道滚动到底部, 效再切换第二个频道的时候(新建-内容没有那么高), 滚动会从底部滚动回到顶部
      // 这个时候发生了滚动, 所以滚动事件还是触发了, immediate-check判断无效

      if (this.articleList.length === 0) {
        this.loading = false // 第一次上面还是判定触底(触发onLoad方法时loading自动改true)
        // 如果不改回来, 下次触底就不在执行onLoad方法
        return // 如果页面没有数据, 没有高度, 让本次onLoad逻辑代码不往下执行
      }
      // 获取文章列表
      this.getArticleListFn()
    },

    // 下拉刷新方法
    onRefresh() {
      this.articleList = []
      this.timestamp = new Date().getTime()
      // 获取文章列表
      this.getArticleListFn()
    },

    // 反馈不感兴趣文章
    async dislikeFn(artId) {
      try {
        await articleDislikeAPI(artId)
        Notify({ type: 'success', message: '反馈成功！' })
      } catch (error) {}
    },

    // 文章举报反馈
    async reportFn(artId, type, remark) {
      try {
        await articleReportAPI(artId, type, remark)
        Notify({ type: 'success', message: '反馈成功！' })
      } catch (error) {
        Notify({ type: 'danger', message: '反馈失败！' })
      }
    },

    // 点击跳转到文章详细页面
    itemClickFn(artId) {
      this.$router.push({
        path: `/articleDetail?art_id=${artId}`
      })
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style lang="less" scoped>
.van-loading {
  padding-top: 10px;
  text-align: center;
}
</style>
